import { Component } from "react"
import Tab from "./components/Tab"
import Navbar from "./components/Navbar"
export default class App extends Component {
  constructor() {
    super()
    this.state = {
      active: 0,
      list: [
        { name: "流行", content: "流行内容" },
        { name: "新款", content: "新款内容" },
        { name: "精选", content: "精选内容" }
      ]
    }
  }

  tabChange(index) {
    //  这里setState会引起Tab的刷新
    this.setState({
      active: index
    })
  }
  btnClick(e) {
    console.log("点击了button", e)
  }
  getElementType(name) {
    if (name === "精选") {
      return <span>{name}</span>
    } else if (name === "流行") {
      return <button onClick={this.btnClick.bind(this)}>{name}</button>
    } else return <i>{name}</i>
  }

  render() {
    const { list, active } = this.state
    return (
      <div>
        <div className="Navbar">
          {/* leftEl这么可以写是因为在jsx中所有tag元素都会转为react.createElement语法的 ， 所以本质是对象*/}
          <Navbar
            leftEl={<div>{"<"}</div>}
            centerEl={<div>购物车</div>}
            rightEl={<div>登录</div>}
          />
        </div>
        <div className="tabs">
          {/* 故技重施，让用户决定要用什么做item-tab的展示，如果没传，则默认用span展示 */}
          <Tab
            active={active}
            list={list}
            elementType={(name) => this.getElementType(name)}
            onChange={(index) => {
              this.tabChange(index)
            }}
          />
          <div className="content">{list[active]["content"]}</div>
        </div>
      </div>
    )
  }
}
